import Vue from 'vue';
import axios from 'axios';
import ViewUI from 'view-design';
import VueClipboard from 'vue-clipboard2';
import VueLazyload from 'vue-lazyload';
import svgIcon from '@/components/svgIcon/index';

import 'view-design/dist/styles/iview.css';
import '@/assets/fonts/font.css';

import enUS from 'view-design/dist/locale/en-US';
import zhCN from 'view-design/dist/locale/zh-CN';
import ptBR from 'view-design/dist/locale/pt-BR';
import ElementUI from 'element-ui';
import i18n from './locales/i18n';
import router from './router';

import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

const LANGMAP = {
  zh: zhCN,
  en: enUS,
  pt: ptBR,
};

Vue.use(ViewUI, { locale: LANGMAP[i18n.locale] || zhCN });
Vue.use(VueClipboard);
Vue.use(VueLazyload);
Vue.use(svgIcon);
Vue.use(ElementUI);

Vue.prototype.$http = axios;
Vue.config.productionTip = false;


let instance = null;

function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    el: '#canvas1',
    render: h => h(App),
    router,
    i18n,
  }).$mount(container ? container.querySelector('#canvas1') : '#canvas1');
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('Canvas app bootstraped');
}

export async function mount(props) {
  console.log('Canvas app mount');
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance = null;
}

// new Vue({
//   el: '#canvas1',
//   router,
//   i18n,
//   render: (h) => h(App),
// }).$mount('#canvas1');